// pages/guiji/guiji.js
// 引用百度地图微信小程序JSAPI模块 
var bmap = require('../../libs/bmap-wx'); 
var wxMarkerData = []; 

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 地图
    // 轨迹拐点
    markers: [
      {
        id: 1,
        longitude: 121.49295,
        latitude: 31.22337,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      },
      {
        id: 2,
        longitude: 121.43676,
        latitude: 31.18831,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      },
      {
        id: 3,
        longitude: 121.42462,
        latitude: 31.22036,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      },
      {
        id: 4,
        longitude:121.4444,
        latitude: 31.22884,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      },
      {
        id: 5,
        longitude: 121.39703,
        latitude: 31.24951,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      },
      {
        id: 6,
        longitude: 121.44636,
        latitude: 31.28075,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      },
      {
        id: 7,
        longitude: 121.48162,
        latitude: 31.27788,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      },
      {
        id: 8,
        longitude: 121.526,
        latitude: 31.2595,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      },
      {
        id: 9,
        longitude:121.38162,
        latitude: 31.11246,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      },
      {
        id: 10,
        longitude: 121.4891,
        latitude: 31.4045,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      },
      {
        id: 11,
        longitude: 121.2655,
        latitude: 31.37473,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      },
      {
        id: 12,
        longitude: 104.06628413416671,
        latitude: 30.57293834162157,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      },
      {
        id: 13,
        longitude: 102.83299803431667,
        latitude:24.879980382762554,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      },
      {
        id: 14,
        longitude: 106.5520000720104,
        latitude:29.562700519072557,
        iconPath: '../../image/touming.png',
        width:1,
        height:1,
        customCallout: {
          anchorY: 0,
          anchorX: 0,
          display: 'ALWAYS'
        },
      }
    ], 
    customCalloutMarkerIds:[],
    latitude: "", 
    longitude: "", 
    rgcData: {},
    // 轨迹经纬度
    polyline: [{
      points: [{
          longitude: 121.49295,
          latitude: 31.22337,
        }, {
          longitude: 121.43676,
          latitude: 31.18831,
        }, {
          longitude: 121.42462,
          latitude: 31.22036,
        }, {
          longitude:121.4444,
          latitude: 31.22884,
        },{
          longitude: 121.39703,
          latitude: 31.24951,
        },{
          longitude: 121.44636,
          latitude: 31.28075,
        },{
          longitude: 121.48162,
          latitude: 31.27788,
        },{
          longitude: 121.526,
          latitude: 31.2595,
        },{
          longitude:121.38162,
          latitude: 31.11246,
        },{
          longitude: 121.4891,
          latitude: 31.4045,
        },{
          longitude: 121.2655,
          latitude: 31.37473,
        },
        {
          longitude: 104.06628413416671,
          latitude: 30.57293834162157,
        },
        {
          longitude: 102.83299803431667,
          latitude:24.879980382762554,
        },
        {
          longitude: 106.5520000720104,
          latitude:29.562700519072557,
        }
      ],
      color: "#455EAA",
      width: 4,
      dottedLine: false,//是否虚线
      arrowLine: true,//是否带箭头
    }],
    // 圆圈
    circles:[
      {
        longitude: 106.5520000720104,
        latitude:29.562700519072557,
        color: '#FF0000DD',
        fillColor: '#7cb5ec88',
        radius: 4000,
        strokeWidth: 0,
      },
      {
        longitude: 102.83299803431667,
        latitude:24.879980382762554,
        color: '#FF0000DD',
        fillColor: '#7cb5ec88',
        radius: 10000,
        strokeWidth: 2
      }
    ],

    // 滑动时间板块
    startX:0,
    delBtnWidth: 70, //删除按钮宽度单位（rpx）
    txtStyle:'',
    list:[
      {time:"08:23",txtStyle:"left:0",switch1Checked:false},
      {time:"11:30",txtStyle:"left:0",switch1Checked:true},
      {time:"13:04",txtStyle:"left:0",switch1Checked:false},
      {time:"17:45",txtStyle:"left:0",switch1Checked:false},
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    that.ditu();
  },
  // 地图
  ditu(){
    var that = this; 
    // 新建百度地图对象 
    var BMap = new bmap.BMapWX({ 
        ak: '8nWG5WCRVT8tzla6VUAD2deHlDlSvgBz' 
    }); 
    var fail = function(data) { 
        console.log(data) 
    }; 
    var success = function(data) { 
      console.log(data,"经纬度")
      wxMarkerData = data.wxMarkerData;       
      that.setData({ 
          latitude: wxMarkerData[0].latitude 
      }); 
      that.setData({ 
          longitude: wxMarkerData[0].longitude 
      }); 
    } 
    // 发起geocoding检索请求 
    BMap.geocoding({ 
        // address: "上海市普陀区", 
        address: "重庆", 
        fail: fail, 
        success: success, 
        // iconPath: '../../image/xiongmao.jpeg', 
        // iconTapPath: '../../image/1.jpg' 
    }); 

    // 轨迹的圆点
    that.data.markers.forEach((item,index)=>{
      that.data.customCalloutMarkerIds.push(item.id)
      item.customCallout.anchorY=wx.getSystemInfoSync().windowHeight*0.02
    })
    that.setData({
      markers:that.data.markers,
      customCalloutMarkerIds:that.data.customCalloutMarkerIds
    })
  },



  // 时间滑动板块
  switch1Change(e){
    console.log(e.detail.value)
  },
  // 手指滑动开始
  touchS: function(e) {
    if (e.touches.length == 1) {
      this.setData({
        //设置触摸起始点水平方向位置
        startX: e.touches[0].clientX
      });
    }
  },
  // 手指滑动中
  touchM: function(e) {
    if (e.touches.length == 1) {
      //手指移动时水平方向位置
      var moveX = e.touches[0].clientX;
      //手指起始点位置与移动期间的差值
      var disX = this.data.startX - moveX;
      var delBtnWidth = this.data.delBtnWidth;
      var txtStyle = "";
      if (disX == 0 || disX < 0) { //如果移动距离小于等于0，文本层位置不变
        txtStyle = "left:0px";
      } else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
        txtStyle = "left:-" + disX + "px";
        if (disX >= delBtnWidth) {
          //控制手指移动距离最大值为删除按钮的宽度
          txtStyle = "left:-" + delBtnWidth + "px";
        }
      }
      //获取手指触摸的是哪一项
      var index = e.target.dataset.index;
      if (index >= 0) {
        this.data.list[index].txtStyle=txtStyle;
        //更新列表的状态
        this.setData({list: this.data.list});
      }
    }
  },
  // 手指滑动结束
  touchE: function(e) {
    if (e.changedTouches.length == 1) {
      //手指移动结束后水平位置
      var endX = e.changedTouches[0].clientX;
      //触摸开始与结束，手指移动的距离
      var disX = this.data.startX - endX;
      var delBtnWidth = this.data.delBtnWidth;
      //如果距离小于删除按钮的1/2，不显示删除按钮
      var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
      //获取手指触摸的是哪一项
      var index = e.target.dataset.index;
      if (index >= 0) {
        this.data.list.forEach((item,index)=>{
          item.txtStyle="left:0"
        })
        this.data.list[index].txtStyle=txtStyle;
        //更新列表的状态
        this.setData({list: this.data.list});
      }
    }
  },
  // 删除
  remo(e){
    let listIndex = e.target.dataset.index;
    this.data.list.splice(listIndex,1);
    this.setData({
      list:this.data.list
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})